/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================
 */

<style lang="less" scoped>
.statistics-container {
  margin-bottom: 0.5%;
  background-color: #fff;

  .statistics-title {
    display: flex;
    align-items: center;
    height: auto;
    color: white;
    background-color: white;
  }

  .statistics-content {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    margin-left: 1%;

    .allStatisticContainer {
      width: 31%; // 一行放三个
      height: 100%;
      margin: 0.8%;
      background-color: white;

      .statisticContaierContent {
        width: 100%;

        .runTag {
          width: 100%;
        }
      }
    }
  }
}

.showClass {
  display: none;
}

.my-label {
  display: flex;
  width: 100%;
  cursor: pointer;

  .triangle {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    border-color: transparent transparent transparent #7f7cc1;
    border-style: dashed dashed dashed solid;
    border-top-width: 15px;
    border-right-width: 18px;
    border-bottom-width: 15px;
    border-left-width: 18px;
  }

  .triangle-father {
    position: relative;
  }

  .circle-father {
    position: relative;
    width: 15%;
    height: 30px;
    background-color: #7f7cc1;
  }

  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  .my-text {
    width: 70%;
    height: 30px;
    text-align: center;
    vertical-align: center;
    background-color: #7f7cc1;
  }

  span {
    align-items: center;
    line-height: 30px;
    color: white;
  }
}

.sub .triangle {
  border-color: transparent transparent transparent #b8c6ff;
}

.sub .circle-father {
  background-color: #b8c6ff;
}

.sub .my-text {
  background-color: #b8c6ff;
}

.sub {
  display: flex;
  align-items: center;
  width: 9.5%;
  height: 30px;
  font-family: sans-serif;
  font-size: 12px;
  color: #fff;
  background-size: 100% 100%;
}

.sub1 {
  display: flex;
  align-items: center;
  width: 9.5%;
  height: 30px;
  font-family: sans-serif;
  font-size: 12px;
  color: #fff;
  background-size: 100% 100%;
}

.line1 {
  width: 88%;
  height: 1px;
  background-color: #f4f6ff;
}

.line2 {
  width: 2.5%;
  height: 5px;
  background-color: #625eb3;
}

.linestyle {
  background-color: #b9c6ff;
}
</style>
<template>
  <div class="statistics-container">
    <div class="statistics-title" @click="showContent()">
      <div :class="[showFlag ? 'sub1' : 'sub']">
        <div class="my-label">
          <div class="my-text">
            <span>{{ categoryName }}</span>
          </div>
          <div class="circle-father">
            <div class="circle" />
          </div>
          <div class="triangle-father">
            <div class="triangle" />
          </div>
        </div>
      </div>
      <div class="line1" />
      <div :class="['line2', showFlag ? '' : 'linestyle']" />
    </div>
    <div :class="[showFlag ? '' : 'showClass']">
      <div>
        <div v-for="(oneRunData, runIdx) in runData" :key="runIdx" :class="['statistics-content']">
          <div
            v-for="(item, index) in oneRunData"
            v-show="getDataSetsState[item[0]]"
            :id="[idArray[item[4]]]"
            :key="index"
            class="allStatisticContainer"
          >
            <statisticContainer
              :data="item[2]"
              :ttlabel="item[0]"
              :tag="item[1]"
              :itemp="item[4]"
              :componentName="componentName"
              :runColor="getStatisticColor[item[3] % getStatisticColor.length]"
              :divId="idArray[item[4]]"
              :parentComponent="parentComponent"
              checked="false"
              class="statisticContaierContent"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
import { statisticContainer } from '../drawStatistic';

const {
  mapGetters: mapStatisticGetters,
  mapActions: mapStatisticActions,
  mapMutations: mapStatisticMutations,
} = createNamespacedHelpers('Visual/statistic');
const { mapState: mapLayoutStates } = createNamespacedHelpers('Visual/layout');
export default {
  components: {
    statisticContainer,
  },
  props: {
    categoryInfo: String,
  },
  data() {
    return {
      showFlag: '',
      componentName: this.categoryInfo,
      categoryName: '',
      allData: [],
      runData: [],
      idArray: [],
      parentComponent: true,
    };
  },
  computed: {
    ...mapStatisticGetters([
      'getInitStateFlag',
      'getBinNum',
      'getDistData',
      'getHistData',
      'getMode',
      'getShowStatisticFlag',
      'getDataSets',
      'getDataSetsState',
      'getStatisticColor',
      'getHistShow',
      'getDistShow',
      'getUpdateFlag',
      'getFeatchHistDataFinished',
      'getFeatchDistDataFinished',
    ]),
    ...mapLayoutStates(['userSelectRunFile']),
  },
  watch: {
    getUpdateFlag() {
      if (this.categoryInfo === 'distribution' && this.getFeatchDistDataFinished && this.showFlag) {
        this.featchAllDistData();
      }
      if (this.categoryInfo === 'histogram' && this.getFeatchHistDataFinished && this.showFlag) {
        this.featchAllHistData();
      }
    },
    getMode(curMode) {
      if (this.categoryInfo === 'histogram') {
        if (curMode === '三维') {
          this.componentName = 'threed';
        } else {
          this.componentName = 'orthographic';
        }
      }
    },
    getBinNum(newBinNum) {
      if (this.categoryInfo === 'histogram') {
        this.manageHistData({ index: 0, length: this.getHistData.length });
      }
    },
    getHistData(data) {
      if (this.categoryInfo === 'histogram') {
        this.allData = data;
        this.idArray = [];
        for (let i = 0; i < this.allData.length; i++) {
          this.idArray.push(`myHistogramScale${i}`);
        }
        this.setRunData();
      }
    },
    getDistData(data) {
      if (this.categoryInfo === 'distribution') {
        this.allData = data;
        this.idArray = [];
        for (let i = 0; i < this.allData.length; i++) {
          this.idArray.push(`myDistributionScale${i}`);
        }
        this.setRunData();
      }
    },
    userSelectRunFile() {
      this.setDatasetsShow();
    },
    getHistShow(val) {
      if (this.categoryInfo === 'histogram') {
        this.showFlag = val;
        if (val) {
          this.setHistData();
          document.getElementsByClassName('statistics-container')[0].scrollIntoView(true);
        }
      }
    },
    getDistShow(val) {
      if (this.categoryInfo === 'distribution') {
        this.showFlag = val;
        if (val) {
          this.setDistData();
          document.getElementsByClassName('statistics-container')[1].scrollIntoView(true); // 书签滑到页面最顶端
        }
      }
    },
  },
  created() {
    if (this.categoryInfo === 'histogram') {
      this.categoryName = '直方图';
      this.showFlag = this.getHistShow;
      if (this.showFlag) {
        this.setHistData();
      }
    } else {
      this.categoryName = '分布图';
      this.showFlag = this.getDistShow;
      if (this.showFlag) {
        this.setDistData();
      }
    }
  },
  mounted() {
    this.setDatasetsShow();
  },
  methods: {
    ...mapStatisticActions(['featchAllDistData', 'featchAllHistData']),
    ...mapStatisticMutations([
      'manageHistData',
      'setDataSetsState',
      'setInitStateFlag',
      'setHistShow',
      'setDistShow',
      'clearHistData',
      'clearDistData',
    ]),
    showContent() {
      if (this.categoryInfo === 'histogram') {
        this.setHistShow(!this.showFlag);
      } else {
        this.setDistShow(!this.showFlag);
      }
    },
    setHistData() {
      if (this.getMode === '三维') {
        this.componentName = 'threed';
      } else {
        this.componentName = 'orthographic';
      }
      // 如果第一个页面标记为true，不用再重新获取数据
      if (this.getInitStateFlag) {
        this.setInitStateFlag(false);
        return;
      }
      if (!this.getInitStateFlag && this.getHistData.length === 0) {
        this.featchAllHistData();
        return;
      }
      // 有数据
      this.allData = this.getHistData;
      this.idArray = [];
      for (let i = 0; i < this.allData.length; i++) {
        this.idArray.push(`myHistogramScale${i}`);
      }
      this.setRunData();
    },
    setDistData() {
      this.componentName = 'overlook';
      if (this.getDistData.length === 0) {
        this.featchAllDistData();
        return;
      }
      this.allData = this.getDistData;
      this.idArray = [];
      for (let i = 0; i < this.allData.length; i++) {
        this.idArray.push(`myDistributionScale${i}`);
      }
      this.setRunData();
    },
    setDatasetsShow() {
      const stateTemp = [];
      for (let i = 0; i < this.getDataSets.length; i++) {
        stateTemp[this.getDataSets[i]] = false;
      }
      for (let i = 0; i < this.userSelectRunFile.length; i++) {
        stateTemp[this.userSelectRunFile[i]] = true;
      }
      // userselectRunFiles没有保存状态，statistic保存run状态
      this.setDataSetsState(stateTemp);
    },
    setRunData() {
      // 按run对得到的数据再处理一下
      if (this.allData.length === 0) {
        this.runData = [];
        return;
      }
      let count = 0;
      const runDataTemp = [[this.allData[0]]];
      for (let i = 1; i < this.allData.length; i++) {
        if (this.allData[i][0] !== this.allData[i - 1][0]) {
          // 认为run是按顺序排放的
          count++;
          runDataTemp.push([]);
        }
        runDataTemp[count].push(this.allData[i]);
      }
      this.runData = runDataTemp;
      this.setDatasetsShow();
    },
  },
};
</script>
